<template>
    <view class="info ph-40 mt-20">
        <u--form labelPosition="left" :model="model" ref="uForm" labelWidth="110" :labelStyle="{ fontSize: 32 }">
            <view class="pb-32 photo">
                <view class="pt-32 fs-32 text-color4 mb-24">身份证</view>
                <view class="f">
                    <view class="w-327 h-210 mr-16" @click="uploadUp">
                        <image
                            :src="model.legalIdCardFrontPictureUrl"
                            class="w-327 h-210"
							v-if="model.legalIdCardFrontPictureUrl"
                        ></image>
						   <image
                            :src="getBaseUrl() + '/admin-api/system/file/19/get/66ff890d0d53ab9af8a81301ace20c261d17483dfaf7b95c22c127f542140b8d.png'"
                            class="w-327 h-210"
							v-else
                        ></image>
                    </view>
                    <view class="w-327 h-210" @click="uploadDown">

                        <image
						:src="model.legalIdCardBackPictureUrl"

						class="w-327 h-210"
						v-if="model.legalIdCardBackPictureUrl"
						></image>
						 <image
						:src="getBaseUrl() + '/admin-api/system/file/19/get/73da956c5e4148f76cadbdb308ac799ffd3f13b8f292393e957f3943ac627897.png'"

						class="w-327 h-210"
						v-else
						></image>
                    </view>
                </view>
            </view>

            <u-form-item label="法人姓名" prop="legalName" borderBottom>
                <u--input v-model="model.legalName" border="none" placeholder="请输入法人姓名" fontSize="16" clearable></u--input>
            </u-form-item>
            <u-form-item label="法人身份证号" prop="legalIdCard" borderBottom>
                <u--input v-model="model.legalIdCard" border="none" placeholder="请输入法人身份证号" fontSize="16" clearable></u--input>
            </u-form-item>
        </u--form>

        <view :style="{ paddingBottom: safeAreaBottom + 'px' }" class="bot w-f" style="z-index: 99">
            <view class="ph-40">
				  <!-- <view class="f ai-c mt-32"> -->
						<!-- <u-checkbox-group @change="getAgree">
							<u-checkbox v-model="isAgree" shape="circle" size="15" activeColor="#FABB3C"></u-checkbox>
						</u-checkbox-group> -->
				   <!-- <view class="fs-28 text-color3 ml-12">我已仔细阅读并同意<text class="text-color">《商家服务协议》</text></view>
					</view> -->
               <view class="f ai-c h-88" @click="getAgree">
                    <image src="../../static/select-check.png" class="w-32 h-32" v-if="isAgree==true"></image>
                    <image src="../../static/select.png" class="w-32 h-32" v-else></image>
                    <view class="fs-22 text-color3 ml-12">我已仔细阅读并同意<text class="text-color" @click='toText(19)'>《商家服务协议》</text></view>
                </view>
                <view class="f ai-c jc-s-b h-136">
                    <view class="w-327"><u-button text="上一步" color="#F5F5F5" shape="circle" @click="toCancel" :customStyle="{ color: '#555555' }"></u-button
                    ></view>
                    <view class="w-327"><u-button text="提交审核" color="#FABB3C" shape="circle" @click="toConfirm"></u-button></view>
                </view>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { getBaseUrl } from '@/utils/env';
import { getUploadUrl } from '@/utils/env';
const model = ref({
	legalIdCardFrontPictureUrl:'',
	legalIdCardBackPictureUrl:''
});
const fileList = ref<any[]>([]);
		const isAgree = ref(false);
// 新增图片
async function afterRead(event: any) {
    // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
    let lists = [].concat(event.file);
    let fileListLen = fileList.value.length;
    lists.map((item) => {
        fileList.value.push({
            ...item,
            status: 'uploading',
            message: '上传中',
        });
    });
    for (let i = 0; i < lists.length; i++) {
        const result = await uploadFilePromise(lists[i].url);
        let item = fileList.value[fileListLen];
        fileList.value.splice(
            fileListLen,
            1,
            Object.assign(item, {
                status: 'success',
                message: '',
                url: result,
            })
        );
        fileListLen++;
    }
}
function uploadFilePromise(url: string) {
    return new Promise((resolve, reject) => {
        uni.uploadFile({
               url: getUploadUrl(),
            filePath: url,
            name: 'file',
            formData: {
                user: 'test',
            },
            success: (res) => {
                setTimeout(() => {
                    resolve(res.data.data);
                }, 1000);
            },
        });
    });
}
function uploadUp() {
    uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album'], //从相册选择
        success: function (res) {
            console.log(JSON.stringify(res.tempFilePaths));
            uni.uploadFile({
                url: getUploadUrl(),
                filePath: res.tempFilePaths[0],
                name: 'file',
                formData: {
                    user: 'test',
                },
                success: (res) => {
					console.log(JSON.parse(res.data).data)
                    model.value.legalIdCardFrontPictureUrl = JSON.parse(res.data).data;
                },
            });
        },
    });
}
function uploadDown() {
    uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album'], //从相册选择
        success: function (res) {
            console.log(JSON.stringify(res.tempFilePaths));
            uni.uploadFile({
                url: getUploadUrl(),
                filePath: res.tempFilePaths[0],
                name: 'file',
                formData: {
                    user: 'test',
                },
                success: (res) => {
                    model.value.legalIdCardBackPictureUrl = JSON.parse(res.data).data;
                },
            });
        },
    });
}
function getAgree() {
	    isAgree.value = !isAgree.value;

	}
	function toConfirm() {
		if(isAgree.value == false){
			uni.showToast({
			    title: '请输入阅读协议',
			    icon: 'none',
			});
			return;
		}
		mtit('cf',3,model.value)

	}

	function toText(type:number) {
	    uni.navigateTo({
	        url: '/pages_mine/text?type='+type,
	    });
	}
function toCancel(){
	mtit('cf',1,{})
}
	const mtit = defineEmits<{
	    // update:固定写法，后面的变量是父组件中v-model：后面的这个变量
	    (event: 'cf',n:number,data:any): void
	}>()
//底部安全距离
const systemInfo = uni.getSystemInfoSync();
let safeArea = systemInfo.safeArea;
let screenHeight = systemInfo.screenHeight;
let safeAreaBottom = screenHeight - safeArea.bottom;
</script>
<style lang="scss" scoped>
.info {
    background: #fff;
    .bot {
        position: fixed;
        left: 0;
        bottom: 0;
        background: #fff;
        border-top: 1px solid #f5f5f5;
    }
    .photo {
        border-bottom: 1rpx solid #f5f5f5;
    }
}
</style>
